<template>
	<view v-show="showSheetView">

		<view class="view-modal" :class="[modalAnimation?'ani_start':'ani_end']"
			@click="maskDismiss?cancelAction():null">
			<view v-if="displayStyle === 'drawer'" class="drawer-view" :class="[modalAnimation?'ani-top':'ani-btm']"
				@click.stop="noaction">
				<view class="head-view">
					<view class="cancel-view" @click="cancelAction">
						<text>取消</text>
					</view>
					<view class="title-view">
						<text>{{sheetTitle}}</text>
					</view>
					<view class="ok-view" @click="okAction">
						<text>确定</text>
					</view>
				</view>
				<view class="bread-view">
					<slot v-for="(item,index) in breadList">
						<text :class="[index===breadList.length-1?'hilight-text':'']"
							@click.stop="breadClickedAction(index)">{{item.label}}</text>
						<image v-if="index<breadList.length-1" class="cuIcon-right"></image>
					</slot>
				</view>
				<view class="cnts-view">
					<scroll-view scroll-y="true" class="sview-1" :style="{ transform: `translateX(${anispace}vw)`}">
						<view class="column-view colum-line" v-for="(item,index) in drawerList" :key="index"
							@click.stop="cellClickedAction(1,index)">
							<text class="single-line"
								:class="[index===col1Index?'hilight-text':null]">{{item.label}}</text>
							<image v-if="index===col1Index" style="width: 30upx;height: 30upx;color: #0286df;"
								class="cuIcon-check"></image>
						</view>
					</scroll-view>
					<scroll-view scroll-y="true" class="sview-2" :style="{transform: `translateX(${anispace}vw)`}">
						<view class="column-view colum-line" v-for="(item,index) in dataList[col1Index].children"
							:key="index" @click.stop="cellClickedAction(2,index)">
							<text class="single-line"
								:class="[index===col2Index?'hilight-text':null]">{{item.label}}</text>
							<image v-if="index===col2Index" style="width: 30upx;height: 30upx;color: #0286df;"
								class="cuIcon-check"></image>
						</view>
					</scroll-view>
					<scroll-view scroll-y="true" class="sview-3" :style="{transform: `translateX(${anispace}vw)`}">
						<view class="column-view"
							v-for="(item,index) in dataList[col1Index].children[col2Index].children" :key="index"
							@click.stop="cellClickedAction(3,index)">
							<text class="single-line"
								:class="[index===col3Index?'hilight-text':null]">{{item.label}}</text>
							<image v-if="index===col3Index" style="width: 30upx;height: 30upx;color: #0286df;"
								class="cuIcon-check"></image>
						</view>
					</scroll-view>
				</view>
			</view>
			<view v-else class="sheet-view" :class="[modalAnimation?'ani-top':'ani-btm']">
				<view class="head-view">
					<view class="cancel-view" @click="cancelAction">
						<text>取消</text>
					</view>
					<view class="title-view">
						<text>{{sheetTitle}}</text>
					</view>
					<view class="ok-view" @click="okAction">
						<text>确定</text>
					</view>
				</view>

				<picker-view :indicator-style="indicatorStyle" :value="selValue" @change="bindChange"
					class="picker-view">
					<picker-view-column>
						<view class="column-item" v-for="(item,index) in dataList" :key="index">{{item.label}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="column-item" v-for="(item,index) in dataList[col1Index].children" :key="index">
							{{item.label}}
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="column-item"
							v-for="(item,index) in dataList[col1Index].children[col2Index].children" :key="index">
							{{item.label}}
						</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		cityList
	} from '@/api/repair.js'
	export default {
		name: "uniRegionSheet",
		data() {
			return {
				viewTitle: null,
				modalAnimation: false,
				indicatorStyle: `height: 50px;line-height:50px`,
				selValue: [0, 0, 0],
				col1Index: 0,
				col2Index: 0,
				col3Index: 0,
				breadList: [],
				drawerList: [],
				scroller2Left: false,
				lastScrollIndex: 0,
				anispace: 0,
				dataList: [],

			};
		},
		props: {
			showSheetView: {
				type: Boolean,
				default: false
			},
			defaultIndexs: {
				type: Array,
				default: () => [0, 0, 0]
			},
			sheetTitle: {
				type: String,
				default: "请选择"
			},
			/**页面展示形式：sheet或drawer,drawer会显示面包屑*/
			displayStyle: {
				type: String,
				default: "sheet"
			},
			maskDismiss: {
				type: Boolean,
				default: true
			},
		},
		created() {
			this.getCity();
			this.viewTitle = this.sheetTitle
			this.selValue = this.defaultIndexs

			this.col1Index = this.selValue[0]
			this.col2Index = this.selValue[1]
			this.col3Index = this.selValue[2]
			if (this.displayStyle === 'drawer') {
				let f = this.dataList[this.col1Index]
				this.breadList.addObject({
					label: f.label
				})

				// f = f.list[this.col2Index]
				// this.breadList.addObject({name:f.name})

				// f = f.list[this.col3Index]
				// this.breadList.addObject({name:f.name})

				this.drawerList = this.dataList
			}
		},
		computed: {},
		watch: {
			showSheetView: {
				handler: function(flag) {
					this.modalAnimation = flag
				},
				immediate: true
			}
		},
		methods: {
			getCity() {
				cityList().then(res => {
					this.dataList = res.data;
					this.dataList.forEach(i=>{
						i.children.forEach(c=>{
							c.children.unshift({
								label:'全区域',
								id:''
							})
						})
					})
				})
			},
			cancelAction: function() {
				this.modalAnimation = false
				let self = this
				setTimeout(() => {
					self.$emit('onSelected', {
						'cancel': true
					})
				}, 350);
			},
			okAction: function() {
				this.modalAnimation = false
				let p = this.dataList[this.col1Index].label;
				let pCode = this.dataList[this.col1Index].id;
				let c = this.dataList[this.col1Index].children[this.col2Index].label;
				let cCode = this.dataList[this.col1Index].children[this.col2Index].id
				let a = this.dataList[this.col1Index].children[this.col2Index].children[this.col3Index].label;
				let aCode = this.dataList[this.col1Index].children[this.col2Index].children[this.col3Index].id

				let self = this
				setTimeout(() => {
					self.$emit('onSelected', {
						data: {
							province: p,
							pCode: pCode,
							city: c,
							cCode: cCode,
							area: a,
							aCode: aCode,
							text: p + c + a
						},
						'cancel': false,
						'confirm': true
					})
				}, 350);
			},
			bindChange: function(e) {
				const val = e.detail.value
				this.col1Index = val[0]
				this.col2Index = val[1]
				this.col3Index = val[2]
			},
			noaction() {},
			breadClickedAction(index) {
				if (index === 0) {
					this.lastScrollIndex = 0
					this.anispace = 0
				} else if (index === 1 && this.breadList.length > 2) {
					this.lastScrollIndex = -1
					this.anispace = -100
				}
			},
			cellClickedAction(raw, index) {
				if (raw != this.lastScrollIndex) {
					if (raw > this.lastScrollIndex) {
						this.lastScrollIndex -= 1
					} else {
						this.lastScrollIndex += 1
					}

					this.lastScrollIndex = Math.max(this.lastScrollIndex, -2)
					this.anispace = (this.lastScrollIndex * 100)
				}
				this.breadList.removeAllObject()

				if (raw === 1) {
					this.col1Index = index
					this.col2Index = 0
					this.col3Index = 0

					let f = this.dataList[this.col1Index]
					this.breadList.addObject({
						label: f.label
					})

					f = f.children[this.col2Index]
					this.breadList.addObject({
						label: f.label
					})
				} else if (raw === 2) {
					this.col2Index = index
					this.col3Index = 0

					let f = this.dataList[this.col1Index]
					this.breadList.addObject({
						label: f.label
					})

					f = f.children[this.col2Index]
					this.breadList.addObject({
						label: f.label
					})

					f = f.children[this.col3Index]
					this.breadList.addObject({
						label: f.label
					})
				} else if (raw === 3) {
					this.col3Index = index

					let f = this.dataList[this.col1Index]
					this.breadList.addObject({
						label: f.label
					})

					f = f.children[this.col2Index]
					this.breadList.addObject({
						label: f.label
					})

					f = f.children[this.col3Index]
					this.breadList.addObject(
					{
						label: f.label
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ani_start {
		animation: animationShow 0.4s;
	}

	.ani_end {
		animation: animationHide 0.4s;
	}

	@keyframes animationShow {
		from {
			background-color: rgba(0, 0, 0, 0);
			opacity: 0;
		}

		to {
			background-color: rgba(0, 0, 0, 0.2);
			opacity: 1;
		}
	}

	@keyframes animationHide {
		from {
			background-color: rgba(0, 0, 0, 0.2);
			opacity: 1;
		}

		to {
			background-color: rgba(0, 0, 0, 0);
			opacity: 0;
		}
	}

	@keyframes slideBottom {
		0% {
			transform: translateY(100%)
		}

		100% {
			transform: translateY(0)
		}
	}

	.picker-view {
		width: 100%;
		height: 540upx;
	}

	.cnts-view {
		width: 300vw;
		height: calc(100% - 180upx);

		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;

		scroll-view {
			padding: 0upx 30upx;
			position: absolute;
			height: 100%;
			// width: 30%;
			// max-width: 340upx;
			// min-width: 170upx;
		}
	}


	.right-bd {
		border-right: 1upx solid #eee;
	}

	.column-view {
		height: 78upx;

		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.colum-line {
		border-bottom: 1upx solid #eee;
	}

	.bread-view {
		width: 100%;
		height: 80upx;

		border-top: 6upx solid #eee;
		border-bottom: 6upx solid #eee;

		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;

		padding: 0px 20upx;

		text {
			font-size: 30upx;
			color: #555555;
			height: 80upx;
			line-height: 80upx;

			padding: 0upx 10upx;
		}

		image {
			width: 24upx;
			height: 24upx;
			color: #333333;
		}
	}


	.hilight-text {
		color: #0285df !important;
	}

	.column-item {
		height: 50px;
		line-height: 50px;
		text-align: center;
	}


	.view-modal {
		position: fixed;
		// top: calc(var(--status-bar-height) + 44px);
		top: 0;
		// bottom: 0;
		// height: calc(100% - var(--status-bar-height) - 44px);
		height: 100vh;
		width: 100%;
		z-index: 1000;

		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.2);
	}

	.ani-btm {
		transform: translateY(100%);
	}

	.ani-top {
		animation: slideBottom 0.4s;
	}


	.sheet-view {
		position: absolute;
		bottom: 0upx;
		height: 640upx;
		width: 100%;
		transition: all 0.25s;
		background-color: white;

		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		z-index: 100000;
	}


	.drawer-view {
		position: absolute;
		bottom: 0upx;
		height: 80vh;
		width: 100%;
		transition: all 0.25s;
		background-color: white;

		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;

		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
	}

	.head-view {
		position: relative;
		width: calc(100% - 70upx);
		height: 100upx;

		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.cancel-view {
		position: relative;
		width: 124upx;
		height: 100%;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		text {
			position: relative;
			width: 100%;
			font-size: 32upx;
			color: #333333;

			text-align: left;
		}
	}

	.title-view {
		position: relative;
		height: 100%;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		text {
			position: relative;
			width: 100%;
			font-size: 30upx;
			color: #999999;

			text-align: left;
		}
	}

	.ok-view {
		position: relative;
		width: 124upx;
		height: 100%;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		text {
			position: relative;
			width: 100%;
			font-size: 32upx;
			color: #2197FF;

			text-align: right;
		}
	}

	.mid-view {
		position: relative;
		width: 100%;
		height: 106upx;

		border-bottom: 1upx solid rgb(235, 235, 235);
		border-top: 1upx solid rgb(235, 235, 235);
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.btn-view {
		position: relative;
		width: 50%;
		height: 100%;

		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.tt-view {
		position: relative;
		width: 100%;
		height: 100%;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.normal-text {
		position: relative;
		width: 100%;
		font-size: 32upx;
		color: #555555;
		text-align: center;
	}

	.hili-text {
		position: relative;
		width: 100%;
		font-size: 32upx;
		color: #2197FF;
		text-align: center;
	}

	.active {
		background-color: white;
	}

	.non-active {
		background-color: rgb(245, 245, 245);
	}

	.single-line {
		display: inline-block;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		white-space: nowrap !important;
		line-clamp: 1 !important;
	}

	.sview-1 {
		left: 0;
		transition: all 0.25s;
	}


	.sview-2 {
		left: 100vw;
		transition: all 0.25s;
	}


	.sview-3 {
		left: 200vw;
		transition: all 0.25s;
	}
</style>